﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=utf-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no" />
<title>梦境迷离  - 文章专栏</title>
  <link rel="shortcut icon" href="../images/Logo_40.png" type="image/x-icon">
    <!--Layui-->
<link th:href="@{/css/article.css}" rel="stylesheet" />
<link rel="shortcut icon" th:href="@{/images/Logo_40.png}"
	type="image/x-icon">
<!--Layui-->
<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
<!--font-awesome-->
<link th:href="@{/plug/font-awesome/css/font-awesome.min.css}"
	rel="stylesheet" />
<!--全局样式表-->
<link th:href="@{/css/global.css}" rel="stylesheet" />
<!-- 比较好用的代码着色插件 -->
<link th:href="@{/css/prettify.css}" rel="stylesheet" />
<!-- 本页样式表 -->
<link th:href="@{/css/detail.css}" rel="stylesheet" />
</head>
<body>
	<!-- 主体（一般只改变这里的内容） -->
	<div class="blog-body">
		<!-- canvas -->
		<canvas id="canvas-banner" style="background: #393D49;"></canvas>
		<!--为了及时效果需要立即设置canvas宽高，否则就在home.js中设置-->
		<script type="text/javascript">
			var canvas = document.getElementById('canvas-banner');
			canvas.width = window.document.body.clientWidth - 10;//减去滚动条的宽度
			if (screen.width >= 992) {
				canvas.height = window.innerHeight * 1 / 3;
			} else {
				canvas.height = window.innerHeight * 2 / 7;
			}
		</script>
		<!-- 导航 -->
		<nav class="blog-nav layui-header">
			<div class="blog-container">
				<!-- QQ互联登陆 -->
				<!-- <a target="_blank" th:href="@{/login}"
			 class="blog-user"><span style="color: white;text-align: right;font-size: 15px;">
			 <i class="layui-icon" style="font-size: 15px;">&#xe614;</i> </span>
			</a> --> <!-- <a href="javascript:;" class="blog-user layui-hide"> <img
					th:src="@{/images/Absolutely.png}" alt="jxnu-liguobin"
					title="jxnu-liguobin" />
				</a> --> <a class="blog-logo" th:href="@{/index/home.html}">梦境迷离</a>
				<!-- 导航菜单 -->
				<ul class="layui-nav" lay-filter="nav">
					<li class="layui-nav-item"><a th:href="@{/index/home.html}"><i
							class="fa fa-home fa-fw"></i>&nbsp;网站首页</a></li>
					<li class="layui-nav-item layui-this"><a
						th:href="@{/index/article.html}"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
					</li>
					<li class="layui-nav-item"><a
						th:href="@{/indexViews/resource.html}"><i
							class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a></li>
					<li class="layui-nav-item"><a
						th:href="@{/indexViews/timeline.html}"><i
							class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a></li>
					<li class="layui-nav-item"><a
						th:href="@{/index/about.html}"><i
							class="fa fa-info fa-fw"></i>&nbsp;关于本站</a></li>
				</ul>
				<!-- 手机和平板的导航开关 -->
				<a class="blog-navicon" href="javascript:;"> <i
					class="fa fa-navicon"></i>
				</a>
			</div>
		</nav>
	<!-- 主体（一般只改变这里的内容） -->
	<div class="blog-container">
		<div class="blog-main">
		  <div th:if="${session.searchCount lt 1}"  class="shadow" style="text-align:center;font-size:16px;padding:40px 15px;background:#fff;margin-bottom:15px;">
                        未搜索到与【<span style="color: #FF5722;" th:text="${session.key}">keywords</span>】有关的文章，随便看看吧！</div>
          <div th:if="${session.searchCount gt 0}" class="shadow" style="text-align:center;font-size:16px;padding:40px 15px;background:#fff;margin-bottom:15px;">
                        <div >
                     		      搜索到与【<span style="color: #FF5722;" th:text="${session.key}">keywords</span>】有关的文章【<span style="color: #FF5722;" 
                     		      th:text="${session.searchCount}">0</span>】篇
           </div></div>
			<!--左边文章列表-->
			<div class="blog-main-left"  th:if="${session.searchCount lt 1}">
				<div class="article shadow"  id="imageForArticle" 
					 th:each="blog : ${application.pageBean.result}" >
					<div class="article-left"
						th:if="${not #lists.isEmpty(blog.imageList)}">
						<div th:utext="${blog.imageList[0]}"></div>
					</div>
					<div class="article-left" th:if="${#lists.isEmpty(blog.imageList)}">
						<img src="../images/cover/201703181909057125.jpg" alt="默认显示的图片" />
					</div>
					<div class="article-right">
						<!-- 文章标题 -->
						<div class="article-title">
							<a th:href="@{'/blog/articles/'+${blog.id}}"> <span
								th:text="${blog.title}">标题</span></a>
						</div>
						<!-- 文章摘要 -->
						<div class="article-abstract">
							<p style="overflow:hidden"  th:text="${blog.summary}">摘要</p>
						</div>
					</div>
					<div class="clear"></div>
					<div class="article-footer">
						<!-- 文章的访问信息 -->
						<span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;<span
							th:text="${blog.releaseDateStr}">日期</span></span> <span><i
							class="fa fa-tag"></i>&nbsp;&nbsp;<a
							th:href="@{'/index/home.html?typeId='+${blog.blogType.id}}"><span
								th:text="${blog.blogType.typeName}">类型</span></a></span> <span
							class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;<span
							th:text="${blog.clickHit}">浏览量</span></span> <span
							class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;	<span th:attr="id='sourceId::'+${blog.id}"class = "cy_cmt_count" ></span>
								<script id="cy_cmt_num" 
									src="https://changyan.sohu.com/upload/plugins/plugins.list.count.js?clientId=cytoujWAK">
								</script></span>
					</div>
				</div>
				<fieldset class="layui-elem-field layui-field-title"
					style="margin-top: 30px;">
					<legend></legend>
				</fieldset>

				<div id="demo2"></div>
			</div>
			<!-- 显示搜索信息 -->
			<div class="blog-main-left" th:if="${session.searchCount gt 0}" >
				<div class="article shadow" id="imageForArticle"
					 th:each="blog : ${session.blogIndexList}" >
					<div class="article-left"
						th:if="${not #lists.isEmpty(blog.imageList)}">
						<div th:utext="${blog.imageList[0]}"></div>
					</div>
					<div class="article-left" th:if="${#lists.isEmpty(blog.imageList)}">
						<img src="../images/cover/201703181909057125.jpg" alt="默认显示的图片" />
					</div>
					<div class="article-right">
						<!-- 文章标题 -->
						<div class="article-title">
							<a th:href="@{'/blog/articles/'+${blog.id}}"> <span
								th:utext="${blog.title}">标题</span></a>
						</div>
						<div class="article-abstract">
							<p style="overflow:hidden" th:utext="${blog.content}">摘要</p>
						</div>
					</div>
					<div class="clear"></div>
				<div class="article-footer">
						<span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;<span
							th:text="${blog.releaseDateStr}">日期</span></span> <span></span>
					</div>
				</div>
				<fieldset class="layui-elem-field layui-field-title"
					style="margin-top: 30px;">
					<legend></legend>
				</fieldset>
				<!-- 全文检索的分页 -->
				<div id="demo3"></div>
			</div>

			<div class="blog-main-right">
			<!--右边悬浮 平板或手机设备显示-->
                    <div class="blog-search">
                          <form class="layui-form" action="">
                            <div class="layui-form-item " >
                                <div class="search-keywords  shadow ">
                                    <input type="text" name="keywords" lay-verify="required" placeholder="输入关键词搜索" 
                                    autocomplete="off" class="layui-input" id="key">
                                </div>
                                <div class="search-submit  shadow ">
                                    <a class="search-btn" lay-submit="formSearch" lay-filter="formSearch"><i class="fa fa-search"></i></a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- userStat是状态变量，有 index,count,size,current,even,odd,first,last等属性，
                   			 如果没有显示设置状态变量，thymeleaf会默 认给个“变量名+Stat"的状态变量。${value.count} lt 21-->
                    <div class="blog-module shadow">
							<div class="blog-module-title">搜索排行</div>
							<ul class="fa-ul blog-module-ul" th:each="key,value : ${application.keyList}"
							th:if="${value.count lt 21}">	
							
                            <li><i class="fa-li fa fa-fire"></i><span style=" padding-right: 0px;"> <a
							th:href="@{'/blog/search?key='+${#uris.escapePath(value.current.key)}}"> <span style="font-size: 15px;font-style: normal; "
							th:text="${value.current.key}"></span>&nbsp;&nbsp;&nbsp;<span style="color: gray" th:text="'('+${value.current.value}+')'"></span></a>
						</span>
						</li>
                        </ul>
						<div class="clear"></div>
							<div th:if="${#lists.isEmpty(application.keyList)}">
						<span th:text="暂无信息"></span>
						</div>
					</div>
                    <div class="blog-module shadow">
                        <div class="blog-module-title">阅读排行</div>
                        <ul class="fa-ul blog-module-ul" th:each="blog,blogStat : ${application.bloglist}"
							th:if="${blogStat.count lt 21}">
                            <li><i class="fa-li fa fa-hand-o-right"></i><span style=" padding-right: 0px;"> <a
							th:href="@{'/blog/articles/'+${blog.id}}"> <span
								style="font-size: 15px;font-style: normal; "
								th:text="${blog.title}"></span>&nbsp;&nbsp;&nbsp;<span style="color: gray" th:text="'('+${blog.clickHit}+')'"></span></a>
						</span></li>
                        </ul>
                        	<div class="clear"></div>
							<div th:if="${#lists.isEmpty(application.bloglist)}">
						<span th:text="暂无信息"></span>
						</div>
                    </div>
                    <!--右边悬浮 平板或手机设备显示-->
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
	<!-- 底部 -->
	<footer class="blog-footer">
		<p>
			<span>Copyright</span><span>&copy;</span><span>2017</span><a href="https://www.dreamylost.cn">梦境迷离</a><span>Design
				By jxnu-liguobin</span>
		</p>
		<p>
			<a href="http://www.miitbeian.gov.cn" target="_blank">赣ICP备17017283号-1</a>
		</p>
	</footer>
		<ul
		class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide"
		lay-filter="nav">
		<li class="layui-nav-item"><a th:href="@{/index/home.html}"><i
				class="fa fa-home fa-fw"></i>&nbsp;网站首页</a></li>
		<li class="layui-nav-item layui-this"><a th:href="@{/index/article.html}"><i
				class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a></li>
		<li class="layui-nav-item"><a th:href="@{/indexViews/resource.html}"><i
				class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a></li>
		<li class="layui-nav-item"><a th:href="@{/indexViews/timeline.html}"><i
				class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a></li>
		<li class="layui-nav-item"><a th:href="@{/index/about.html}"><i
				class="fa fa-info fa-fw"></i>&nbsp;关于本站</a></li>
	</ul>
	<!--分享窗体-->
	<div class="blog-share layui-hide">
		<div class="blog-share-body">
			<div style="width: 200px;height:100%;">
				<div class="bdsharebuttonbox">
					<a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a
						class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a
						class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> <a
						class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
				</div>
			</div>
		</div>
	</div>
	 <!-- 音乐播放器 -->
    <div id="QPlayer">
	<ol id="playlist"></ol>
	<div id="pContent">
		<div id="player">
			<span class="cover"></span>
			<div class="ctrl">
				<div class="musicTag marquee">
					<strong>Title</strong>
					 <span> - </span>
					<span class="artist">Artist</span>
				</div>
				<div class="progress">
					<div class="timer left">0:00</div>
					<div class="contr">
						<div class="rewind icon"></div>
						<div class="playback icon"></div>
						<div class="fastforward icon"></div>
					</div>
					<div class="right">
						<div class="liebiao icon"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="ssBtn">
		        <div class="adf"></div>
	    </div>
	</div>
	</div>
    
	<!--遮罩-->
	<div class="blog-mask animated layui-hide"></div>
	<!-- layui.js -->
	<script th:src="@{/layui/layui.js}"></script>
	<!-- 全局脚本 -->
	<script th:src="@{/js/global.js}"></script>
	<!-- 本页脚本 -->
	<script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.marquee.min.js}"></script>
	<script th:src="@{/js/player.js}"></script>
	<script th:src="@{/js/home.js}"></script>
	<!-- jquery cookies -->
	<script th:inline="javascript" type="text/javascript">
	layui.use(['laypage', 'layer','jquery','form'], function(){
	  var laypage = layui.laypage,layer = layui.layer,$ = layui.jquery,form=layui.form;
	  //图片缩放
	  
	  window.onload = function() {  
      var w = $('#imageForArticle').width()-$('.article-title').width()-15;//设置最大宽度,也可根据img的外部容器 而动态获得,比如：$("#demo").width();
      console.info("当前宽："+w);
      $("img").each(function() {//如果有很多图片,使用each()遍历   
            var img_w = $(this).width();//图片宽度   
            var img_h = $(this).height();//图片高度   
            if (img_w > w) {//如果图片宽度超出指定最大宽度   
                var height = (w * img_h) / img_w; //高度等比缩放   
                $(this).css( {  
                    "width" : w,"height" : height  
                });//设置缩放后的宽度和高度   
            }  
        });  
        }
	 // $("#imageName").attr('src','../uploads/'+[[${application.blogger.imageName}]]); //显示博主头像
	  var pindex ;//= [[${application.pageBean.currPage}]];// 当前页
	  var pcount;
	  if([[${session.searchCount}]] > 0) {
	  	pcount=[[session.searchCount]];
	  	pindex=1;
	  } else {
	  	pcount = [[${application.pageBean.total}]];
	  	pindex = [[${application.pageBean.currPage}]];
	  }
     // var pcount = [[${application.pageBean.total}]];// 总记录数
      if(pcount==0) {
      	  	layer.msg('暂无内容！', {
                        title: '系统提示',
                        icon: 5,
                    },
                    function(index) {
                        layer.close(index); //关闭
                         //window.location.href="/index/home?page=1";
                   });
      }
	  laypage.render({
	    elem: 'demo2'
	    ,count: pcount //总记录数
	    ,theme: '#1E9FFF'
	    ,limit : 10//每页十条
	    ,curr :pindex,
	    jump: function(obj, first){
	    //obj包含了当前分页的所有参数，比如：
	    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
	    console.log(obj.limit); //得到每页显示的条数
	    console.log(obj.count); //得到每页显示的条数
	      if(!first){
            window.location.href="/index/article.html?page="+obj.curr
       }
	  }
	 });
	 
	 var pindex=[[${session.currentPage}]];// 当前页
	 //var key = [[${session.key}]];//得到key,每次分页都需要传递
	  laypage.render({
	    elem: 'demo3'
	    ,count: [[${session.searchCount}]] //总记录数
	    ,theme: '#1E9FFF'
	    ,limit : 10//每页十条
	    ,curr :pindex,
	    jump: function(obj, first){
	    //obj包含了当前分页的所有参数，比如：
	    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
	    console.log(obj.limit); //得到每页显示的条数
	    console.log(obj.count); //得到每页显示的条数
	      if(!first){
            window.location.href="../blog/search?page="+obj.curr;
       }
	  }
	 });
	  
  form.on('submit(formSearch)', function(data) {
	//获取博客内容 带标记
	var key = $("#key").val();
	$.ajax({
		async : false,
		url : '../blog/search',
		data : {
			'key' : key,
		},
		type : 'post',
		success : function(result) {
					location.reload();
					console.info("检索成功");
				} 
	});
	return false;
});
	  
	});
</script>
</body>
</html>